<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>神奇的标签模板</title>
</head>
<body>
    <script>
        let name = '后盾人';
        let web = 'houdunren.com';
        console.log(test`在线教程${name},网址是${web}。`);
        console.log(tag`${name}`);

        function test(strings,...vars) {
            console.log(strings);
            console.log(vars);
        }

        function tag(strings,...vars) {
            // 字符串比变量的个数要多
            console.log(strings);
            console.log(vars);
        }



        let lesson = [
            {title : '后盾人html', autor : '后盾人张老师'},
            {title : 'css', autor : '后盾人李老师'},
            {title : '后盾人js', autor : '后盾人赵老师'}
        ];

        function template() {
            return `
            <ul>${lesson.map(item => links`<li>作者：${item.autor}，教程：${item.title}。</li>`
            ).join("")}</ul>`;
        }

        function links(strings,...vars) {
            console.log(strings);
            console.log(vars);

            return strings.map((str,key) => {
                return str + (vars[key] ? vars[key].replace('后盾人',`<a href="https://www.houdunren.com">后盾人</a>`) : '');
            }).join('');
        }

        document.body.innerHTML = template();
    </script>
</body>
</html>